/* You can add global styles to this file, and also import other style files */
@import "ng-tools/ng-tools-styles";

$switch-height: calc(#{$input-height} * .8) !default;
$switch-height-sm: calc(#{$input-height-sm} * .8) !default;
$switch-height-lg: calc(#{$input-height-lg} * .8) !default;
$switch-outer-width: calc(#{$switch-height} * 2) !default;
$switch-outer-width-sm: calc(#{$switch-height-sm} * 2) !default;
$switch-outer-width-lg: calc(#{$switch-height-lg} * 2) !default;
$switch-inner-width: $switch-height !default;
$switch-inner-width-sm: $switch-height-sm !default;
$switch-inner-width-lg: $switch-height-lg !default;
$switch-border-radius: $switch-height !default;
$switch-border-radius-sm: $switch-height-sm !default;
$switch-border-radius-lg: $switch-height-lg !default;
$switch-padding: 2px !default;
$switch-transition: .2s all !default;
$switch-outer-background-color: map_get($theme-colors, 'primary') !default;
$switch-outer-border-color: $switch-outer-background-color;
$switch-inner-background-color: $custom-control-indicator-bg !default;
$theme-colors: map_merge($colors, $theme-colors);
$animationDelay: (
  "100": 100ms,
  "200": 200ms,
  "300": 300ms,
  "400": 400ms,
  "500": 500ms,
  "600": 600ms,
  "700": 700ms,
  "800": 800ms,
  "900": 900ms,
  "1" : 1s,
  "2" : 2s,
  "3" : 3s,
  "4" : 4s,
  "5" : 5s,
);

body {
  background-color: #F9F9F9;
  overflow: hidden;
}

.custom-switch {
  position: relative;

  input {
    display: none;
  }

  label {
    position: relative;
    min-width: calc(#{$switch-height} * 2);
    border-radius: $switch-border-radius;
    height: $switch-height;
    line-height: $switch-height;
    display: inline-block;
    margin-bottom: 0;
    &::before, &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      display: block;
      border-radius: $switch-border-radius;
      transition: .2s all;
    }

    &::before {
      background-color: $switch-inner-background-color;
      width: $switch-outer-width;
      height: $switch-height;
      border: 1px solid $switch-outer-border-color;
    }

    &::after {
      background-color: $switch-outer-background-color;
      width: $switch-inner-width;
      left: $switch-padding;
      top: $switch-padding;
      height: calc(#{$switch-height} - #{$switch-padding} * 2);
    }
  }

  input:checked + label::after {
    background-color: $switch-inner-background-color;
    margin-left: calc(#{$switch-inner-width} - #{$switch-padding} * 2);
  }

  input:checked + label::before {
    background-color: $switch-outer-background-color;
  }

  &.custom-switch-sm {
    label {
      min-width: calc(#{$switch-outer-width-sm} * 2);
      border-radius: $switch-border-radius-sm;
      height: $switch-height-sm;
      line-height: $switch-height-sm;
      &::before {
        width: $switch-outer-width-sm;
        height: $switch-height-sm;
      }
      &::after {
        width: $switch-inner-width-sm;
        height: calc(#{$switch-height-sm} - #{$switch-padding} * 2);
      }
    }
    input:checked + label::after {
      margin-left: calc(#{$switch-inner-width-sm} - #{$switch-padding} * 2);
    }
  }

  &.custom-switch-lg {
    label {
      min-width: calc(#{$switch-height-lg} * 2);
      border-radius: $switch-border-radius-lg;
      height: $switch-height-lg;
      line-height: $switch-height-lg;
      &::before {
        width: $switch-outer-width-lg;
        height: $switch-height-lg;
      }
      &::after {
        width: $switch-inner-width-lg;
        height: calc(#{$switch-height-lg} - #{$switch-padding} * 2);
      }
    }
    input:checked + label::after {
      margin-left: calc(#{$switch-inner-width-lg} - #{$switch-padding} * 2);
    }
  }

  @each $colorName in map_keys($theme-colors) {
    &.custom-switch-#{$colorName} {
      label {
        &::before {
          border-color: map_get($theme-colors, $colorName);
        }
        &::after {
          background-color: map_get($theme-colors, $colorName);
        }
      }
      input:checked + label::before {
        background-color: map_get($theme-colors, $colorName);
      }

    }
  }
}

@each $key, $value in $theme-colors {
  .card-#{$key} {
    border-color: darken($value, 7.5%);
    .card-header {
      color: color-yiq($value);
      border-color: darken($value, 7.5%);
      background-color: $value;
    }
  }
  .text-#{$key} {
    color: $value;
  }
}

